<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <style>
        .red-background {
            background-color: red;
        }
    </style>

</head>

<body>
    <div id="app"></div>
    <script type="text/babel">

        function tick(){
            const redBgElement = <h1 className="red-background">{new Date().toLocaleTimeString()}</h1>
            ReactDOM.render(redBgElement, document.getElementById("app"))
        }

        setInterval(tick, 1000);
    </script>
</body>

</html>